<div class="scrollable">
<div class="scrollable-content">
  <div class="container-fluid section section-break" id="toggleExample">

    <div class="alert alert-warning">
      <i class="fa fa-warning"></i> This is a demo of `mobile-angular-ui.migration` module. It is intended to simplify the transition from 1.1 to 1.2. The syntax used in this page is deprecated and not included
      in default bundle. 
    </div>
    <p toggleable id="lightbulb" active-class="text-primary" class="text-default">
      <i class="fa fa-lightbulb-o"></i>
    </p>

    <div class="btn-group justified nav-tabs">
      <a  
         toggle="toggle"
         target="lightbulb" 
         active-class="active" 
         class="btn btn-default" href>
          Toggle
      </a>
      <a  
         toggle="on" 
         target="lightbulb" 
         active-class="btn-success"
         class="btn btn-default" href>
          Turn On
      </a>
      <a  
         toggle="off"
         target="lightbulb"
         inactive-class="btn-danger"
         class="btn btn-default" href>
          Turn Off
      </a>        
    </div>

    <hr>

    <h5>ExclusionGroup example</h5>

    <div class="panel-group" id="accordion">
      <div class="panel panel-default">
        <div class="panel-heading" toggle target="collapseOne">
          <h4 class="panel-title">
              Collapsible Group Item #1
          </h4>
        </div>
        <div id="collapseOne" toggleable active-class="in" exclusion-group="accordion1" default="active" class="panel-collapse collapse">
          <div class="panel-body">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, quae sint temporibus. Veritatis quo et odit consequuntur quasi delectus ab deserunt nulla quaerat asperiores, voluptatum, dolorem assumenda, alias, minus! Necessitatibus?
          </div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading" toggle target="collapseTwo">
          <h4 class="panel-title">
              Collapsible Group Item #2
          </h4>
        </div>
        <div id="collapseTwo" toggleable active-class="in" exclusion-group="accordion1" class="panel-collapse collapse">
          <div class="panel-body">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam iusto, amet, saepe ipsa pariatur obcaecati distinctio assumenda similique architecto beatae eius, et dolorum atque dignissimos necessitatibus quod! Quidem iure, vitae.
          </div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading" toggle target="collapseThree">
          <h4 class="panel-title">
              Collapsible Group Item #3
          </h4>
        </div>
        <div id="collapseThree" toggleable active-class="in" exclusion-group="accordion1" class="panel-collapse collapse">
          <div class="panel-body">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor cum repudiandae quasi labore, doloribus veniam molestias omnis ut vitae iure non, debitis, tempora rerum, sapiente aspernatur nemo neque quas repellendus.
          </div>
        </div>
      </div>
    </div>

  </div>
</div>
</div>
